<template>
  <div class="loginPage">
    <div class="container">
      <div class="title">登录</div>
      <input type="text" placeholder="账号" v-model="loginData.userName" />
      <input type="password" placeholder="密码" v-model="loginData.password" />
      <button @click="handleClick(loginData)">登录</button>
      <span></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "../../router/index";
import { userRequest } from "@/api";
import { ref, reactive } from "vue";
import { UserInfo } from "@type/User";
import { configToken } from "@/utils/request";
import { useMessage, useNotification } from "naive-ui";
import useUserStore from '@/store/modules/user'

const notification = useNotification();
const message = useMessage();
const userStore = useUserStore()

const loginData = reactive<UserInfo.LoginVO>({
  userName: "",
  password: "",
});
let handleClick = (loginData: UserInfo.LoginVO) => {
  userLogin(loginData);
};

const userInfo = ref<UserInfo.LoginResponseVO>();

// let test = async () => {
//   userRequest.test().then((responseData) => {
//     console.log(responseData);
//   });
// };

let userLogin = async (loginData: UserInfo.LoginVO) => {
  userRequest.login(loginData).then((responseData) => {
    if (responseData.data.code == 200) {
      userInfo.value = responseData.data.data;
      console.log(userInfo.value)
      userStore.saveUser(responseData.data.data)
      console.log(userStore)
      // 保存token 没有token就为空串
      sessionStorage.setItem("token", userInfo.value?.token || "");
      configToken();
      message.info(`${userInfo.value}`);
      notification.success({
        content: "登陆成功",
        meta: `欢迎您，用户：${userInfo.value?.userName}`,
        keepAliveOnHover: true,
        duration: 2500,
      });
      router.push("/index");
    } else {
      notification.error({
        content: "登陆失败",
        meta: `${responseData.data.message}`,
        keepAliveOnHover: true,
        duration: 2500,
      });
    }
  });
};
</script>

<style lang="less" scoped>
.loginPage {
  // 100%窗口高度
  height: 100vh;
  // 弹性布局 居中
  display: flex;
  justify-content: center;
  align-items: center;
  // 渐变背景
  background-image: linear-gradient(
    to right top,
    #051937,
    #542959,
    #a03759,
    #d1623e,
    #d4a418
  );
  // 溢出隐藏
  overflow: hidden;
  .container {
    position: relative;
    z-index: 1;
    background-color: white;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px;
    height: 500px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    .title {
      font-size: 26px;
      margin: 65px auto 70px auto;
    }
    input {
      width: 280px;
      height: 30px;
      text-indent: 8px;
      border: none;
      border-bottom: 1px solid lightgray;
      margin: 12px auto;
      outline: 0 none;
    }
    button {
      width: 280px;
      height: 40px;
      margin: 35px auto 40px;
      // background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
      background-image: linear-gradient(
        to right top,
        #051937,
        #542959,
        #a03759,
        #d1623e,
        #d4a418
      );
      // background: linear-gradient(-200deg, #051937, #004d7a, #008793, #00bf72, #a8eb12);
      color: white;
      font-weight: bold;
      letter-spacing: 8px;
      border-radius: 10px;
      outline: 0 none;
      border: none;
      padding: 0;
      font-size: 100%;
      vertical-align: middle;
      cursor: pointer;
      // 动画过渡
      transition: 0.5s all;
      &:hover {
        // background: linear-gradient(-200deg, #a8eb12, #00bf72, #008793, #004d7a, #004d7a, #051937);
        background: linear-gradient(-200deg, #051937, #542959, #a03759, #d1623e, #d4a418);
        background-position-x: -280x;
      }
    }
  }
}
</style>
